<template>
    <div class="user-list">
      <div class="header">
        <span class="btn fl" @click="goBack">返回</span>
      </div>
      <div class="list">
        <div class="item header">
          <div class="item-content">序号</div>
          <div class="item-content">id</div>
          <div class="item-content">用户名</div>
          <div class="item-content">操作</div>
        </div>
        <div class="item" v-for="(t, i) in tableData" :key="i + 't'">
          <div class="item-content">{{ i + 1}}</div>
          <div class="item-content">{{ t._id }}</div>
          <div class="item-content">{{ t.userName }}</div>
          <div class="item-content">
            <span class="primary btn" @click="toDetail(t)">修改</span>
            <span class="delete btn" @click="onDelete(t)">删除</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import { findUserList, deleteUser } from '@/api/user'
    export default {
      name: "user-list",
      data() {
          return {
            tableData: []
          }
      },
      mounted() {
        this.init()
      },
      methods: {
        init() {
          findUserList().then(res => {
            let { data } = res
            this.tableData = data
          })
        },

        // 删除用户
        onDelete(user) {
          deleteUser(user._id).then(res => {
            alert('删除成功！')
            this.init()
          })
        },

        // 跳转详情
        toDetail(user) {
          this.$router.push({
            name: 'UserForm',
            query: {
              id: user._id
            }
          })
        },

        goBack() {
          this.$router.go(-1)
        }
      }
    }
</script>

<style scoped lang="scss">
  .user-list {
    .list {
      width: 400px;
      .header {
        background: #ccc;
      }
      .item {
        display: flex;
        .item-content {
          padding: 5px;
          width: 260px;
          text-align: center;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          .btn {
            font-size: 12px;
            cursor: pointer;
            margin: 0 3px;
          }
          .primary {
            color: #5896BA;
          }
          .delete {
            color: red;
          }
        }

      }
    }
  }
</style>
